<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySQL参数对比工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        success: '#52C41A',
                        dark: '#1F2329',
                        light: '#F7F8FA'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-database text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">MySQL参数对比工具</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#about" class="text-gray-600 hover:text-primary transition-all-300">关于工具</a></li>
                    <li><a href="#usage" class="text-gray-600 hover:text-primary transition-all-300">使用说明</a></li>
                    <li><a href="#compare" class="text-gray-600 hover:text-primary transition-all-300">开始对比</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 介绍部分 -->
        <section id="about" class="mb-16">
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="text-2xl font-bold mb-4 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>关于工具
                </h2>
                <p class="text-gray-600 mb-4">
                    本工具专为MySQL数据库管理员和开发人员设计，用于对比MySQL 5.7和MySQL 8.0版本的参数配置差异。
                    通过上传基线参数和非基线参数文件，系统将自动分析并高亮显示两者之间的不同之处，帮助您快速识别配置差异，
                    确保数据库配置的一致性和最佳实践。
                </p>
                <div class="grid md:grid-cols-2 gap-6 mt-6">
                    <div class="bg-light p-6 rounded-lg border border-gray-100">
                        <h3 class="font-semibold text-lg mb-2 text-primary">MySQL 5.7</h3>
                        <p class="text-gray-600 text-sm">
                            MySQL 5.7版本引入了许多新特性，包括JSON支持、生成列、多源复制等，
                            同时对性能和安全性进行了重大改进。本工具可帮助您分析该版本的参数配置差异。
                        </p>
                    </div>
                    <div class="bg-light p-6 rounded-lg border border-gray-100">
                        <h3 class="font-semibold text-lg mb-2 text-primary">MySQL 8.0</h3>
                        <p class="text-gray-600 text-sm">
                            MySQL 8.0是一个重大更新，包含了事务数据字典、原子DDL、默认使用InnoDB存储引擎等重要变化，
                            同时对优化器和性能也有显著提升。本工具可帮助您分析该版本的参数配置差异。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使用说明 -->
        <section id="usage" class="mb-16">
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fa fa-book text-primary mr-2"></i>使用说明
                </h2>
                <div class="space-y-6">
                    <div class="flex">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-4">1</div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">选择MySQL版本</h3>
                            <p class="text-gray-600">选择您要对比的MySQL版本（5.7或8.0）</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-4">2</div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">上传基线参数文件</h3>
                            <p class="text-gray-600">上传作为参考标准的基线参数文件（通常是my.cnf或my.ini文件内容）</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-4">3</div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">上传非基线参数文件</h3>
                            <p class="text-gray-600">上传需要与基线对比的非基线参数文件</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-4">4</div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">查看对比结果</h3>
                            <p class="text-gray-600">系统将自动分析并展示参数差异，包括新增、删除和值不同的参数</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 对比部分 -->
        <section id="compare" class="mb-16">
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fa fa-exchange text-primary mr-2"></i>参数对比
                </h2>

                <!-- 版本选择 -->
                <div class="mb-8">
                    <label class="block text-gray-700 font-medium mb-2">选择MySQL版本</label>
                    <div class="flex flex-wrap gap-4">
                        <label class="inline-flex items-center">
                            <input type="radio" name="mysqlVersion" value="5.7" class="form-radio text-primary" checked>
                            <span class="ml-2">MySQL 5.7</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="mysqlVersion" value="8.0" class="form-radio text-primary">
                            <span class="ml-2">MySQL 8.0</span>
                        </label>
                    </div>
                </div>

                <!-- 文件上传区域 -->
                <div class="grid md:grid-cols-2 gap-8 mb-8">
                    <!-- 基线参数上传 -->
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-primary transition-all-300">
                        <div class="text-center">
                            <i class="fa fa-file-text-o text-4xl text-gray-400 mb-4"></i>
                            <h3 class="font-semibold text-lg mb-2">基线参数文件</h3>
                            <p class="text-gray-500 text-sm mb-4">上传作为参考标准的基线参数文件</p>
                            
                            <div class="mb-4">
                                <label for="baselineFile" class="bg-primary text-white py-2 px-4 rounded-md cursor-pointer hover:bg-primary/90 transition-all-300 inline-block">
                                    <i class="fa fa-upload mr-1"></i> 选择文件
                                </label>
                                <input id="baselineFile" type="file" accept=".txt,.cnf,.ini" class="hidden" />
                            </div>
                            
                            <div id="baselineFileName" class="text-sm text-gray-500"></div>
                            
                            <div class="mt-4 pt-4 border-t border-gray-100">
                                <p class="text-xs text-gray-400 mb-2">或直接输入参数内容：</p>
                                <textarea id="baselineText" rows="4" class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="例如：max_connections=100&#10;innodb_buffer_pool_size=1G"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 非基线参数上传 -->
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-primary transition-all-300">
                        <div class="text-center">
                            <i class="fa fa-file-text-o text-4xl text-gray-400 mb-4"></i>
                            <h3 class="font-semibold text-lg mb-2">非基线参数文件</h3>
                            <p class="text-gray-500 text-sm mb-4">上传需要对比的非基线参数文件</p>
                            
                            <div class="mb-4">
                                <label for="nonBaselineFile" class="bg-primary text-white py-2 px-4 rounded-md cursor-pointer hover:bg-primary/90 transition-all-300 inline-block">
                                    <i class="fa fa-upload mr-1"></i> 选择文件
                                </label>
                                <input id="nonBaselineFile" type="file" accept=".txt,.cnf,.ini" class="hidden" />
                            </div>
                            
                            <div id="nonBaselineFileName" class="text-sm text-gray-500"></div>
                            
                            <div class="mt-4 pt-4 border-t border-gray-100">
                                <p class="text-xs text-gray-400 mb-2">或直接输入参数内容：</p>
                                <textarea id="nonBaselineText" rows="4" class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="例如：max_connections=200&#10;innodb_buffer_pool_size=2G"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对比按钮 -->
                <div class="text-center mb-8">
                    <button id="compareBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg shadow-md transition-all-300 inline-flex items-center">
                        <i class="fa fa-search mr-2"></i> 开始对比
                    </button>
                </div>

                <!-- 对比结果 -->
                <div id="results" class="hidden">
                    <div class="mb-6">
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <i class="fa fa-bar-chart text-primary mr-2"></i>对比结果
                        </h3>
                        <div class="flex flex-wrap gap-4 mb-6">
                            <div class="bg-light px-4 py-2 rounded-lg flex items-center">
                                <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                                <span>值不同的参数: <span id="diffCount" class="font-semibold">0</span></span>
                            </div>
                            <div class="bg-light px-4 py-2 rounded-lg flex items-center">
                                <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
                                <span>仅在基线中存在: <span id="onlyBaselineCount" class="font-semibold">0</span></span>
                            </div>
                            <div class="bg-light px-4 py-2 rounded-lg flex items-center">
                                <span class="w-3 h-3 rounded-full bg-danger mr-2"></span>
                                <span>仅在非基线中存在: <span id="onlyNonBaselineCount" class="font-semibold">0</span></span>
                            </div>
                        </div>
                    </div>

                    <!-- 结果标签页 -->
                    <div class="border-b border-gray-200 mb-4">
                        <ul class="flex flex-wrap -mb-px" id="resultTabs" role="tablist">
                            <li class="mr-2" role="presentation">
                                <button class="inline-block p-4 border-b-2 border-primary text-primary rounded-t-lg" id="diff-tab" data-tab="diff" type="button" role="tab">
                                    <i class="fa fa-exclamation-triangle mr-1"></i>值不同的参数
                                </button>
                            </li>
                            <li class="mr-2" role="presentation">
                                <button class="inline-block p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 rounded-t-lg" id="only-baseline-tab" data-tab="only-baseline" type="button" role="tab">
                                    <i class="fa fa-check-circle mr-1"></i>仅在基线中存在
                                </button>
                            </li>
                            <li role="presentation">
                                <button class="inline-block p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 rounded-t-lg" id="only-nonbaseline-tab" data-tab="only-nonbaseline" type="button" role="tab">
                                    <i class="fa fa-plus-circle mr-1"></i>仅在非基线中存在
                                </button>
                            </li>
                        </ul>
                    </div>

                    <!-- 结果内容 -->
                    <div class="tab-content">
                        <!-- 值不同的参数 -->
                        <div id="diff-content" class="tab-pane">
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">参数名称</th>
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">基线值</th>
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">非基线值</th>
                                        </tr>
                                    </thead>
                                    <tbody id="diffTableBody" class="divide-y divide-gray-200">
                                        <!-- 结果将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                            <div id="diffEmpty" class="text-center py-8 text-gray-500 hidden">
                                <i class="fa fa-check-circle text-4xl mb-2 text-success"></i>
                                <p>没有发现值不同的参数</p>
                            </div>
                        </div>

                        <!-- 仅在基线中存在的参数 -->
                        <div id="only-baseline-content" class="tab-pane hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">参数名称</th>
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">基线值</th>
                                        </tr>
                                    </thead>
                                    <tbody id="onlyBaselineTableBody" class="divide-y divide-gray-200">
                                        <!-- 结果将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                            <div id="onlyBaselineEmpty" class="text-center py-8 text-gray-500 hidden">
                                <i class="fa fa-check-circle text-4xl mb-2 text-success"></i>
                                <p>没有仅在基线中存在的参数</p>
                            </div>
                        </div>

                        <!-- 仅在非基线中存在的参数 -->
                        <div id="only-nonbaseline-content" class="tab-pane hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white border border-gray-200">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">参数名称</th>
                                            <th class="py-3 px-4 border-b text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">非基线值</th>
                                        </tr>
                                    </thead>
                                    <tbody id="onlyNonBaselineTableBody" class="divide-y divide-gray-200">
                                        <!-- 结果将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                            <div id="onlyNonBaselineEmpty" class="text-center py-8 text-gray-500 hidden">
                                <i class="fa fa-check-circle text-4xl mb-2 text-success"></i>
                                <p>没有仅在非基线中存在的参数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fa fa-database text-secondary"></i>
                        <span class="font-bold">MySQL参数对比工具</span>
                    </div>
                    <p class="text-gray-400 text-sm mt-2">帮助DBA和开发人员轻松对比MySQL参数配置</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
                &copy; 2023 MySQL参数对比工具 | 设计与开发
            </div>
        </div>
    </footer>

    <!-- 通知提示 -->
    <div id="toast" class="fixed bottom-4 right-4 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all-300 flex items-center">
        <i id="toastIcon" class="fa mr-2"></i>
        <span id="toastMessage"></span>
    </div>

    <script>
        // 文件上传处理
        document.getElementById('baselineFile').addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                document.getElementById('baselineFileName').textContent = e.target.files[0].name;
                
                // 读取文件内容
                const reader = new FileReader();
                reader.onload = function(event) {
                    document.getElementById('baselineText').value = event.target.result;
                };
                reader.readAsText(e.target.files[0]);
            }
        });

        document.getElementById('nonBaselineFile').addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                document.getElementById('nonBaselineFileName').textContent = e.target.files[0].name;
                
                // 读取文件内容
                const reader = new FileReader();
                reader.onload = function(event) {
                    document.getElementById('nonBaselineText').value = event.target.result;
                };
                reader.readAsText(e.target.files[0]);
            }
        });

        // 标签页切换
        document.querySelectorAll('#resultTabs button').forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有标签的活跃状态
                document.querySelectorAll('#resultTabs button').forEach(btn => {
                    btn.classList.remove('border-primary', 'text-primary');
                    btn.classList.add('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                });
                
                // 添加当前标签的活跃状态
                button.classList.remove('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                button.classList.add('border-primary', 'text-primary');
                
                // 隐藏所有内容
                document.querySelectorAll('.tab-pane').forEach(pane => {
                    pane.classList.add('hidden');
                });
                
                // 显示当前内容
                const tabId = button.getAttribute('data-tab');
                document.getElementById(`${tabId}-content`).classList.remove('hidden');
            });
        });

        // 显示通知
        function showToast(message, type = 'info') {
            const toast = document.getElementById('toast');
            const toastIcon = document.getElementById('toastIcon');
            const toastMessage = document.getElementById('toastMessage');
            
            // 设置消息和图标
            toastMessage.textContent = message;
            toastIcon.className = 'fa mr-2';
            
            switch(type) {
                case 'success':
                    toastIcon.classList.add('fa-check-circle', 'text-success');
                    break;
                case 'error':
                    toastIcon.classList.add('fa-exclamation-circle', 'text-danger');
                    break;
                case 'warning':
                    toastIcon.classList.add('fa-exclamation-triangle', 'text-warning');
                    break;
                default:
                    toastIcon.classList.add('fa-info-circle', 'text-primary');
            }
            
            // 显示通知
            toast.classList.remove('translate-y-20', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }

        // 解析参数文本为对象
        function parseParameters(text) {
            const params = {};
            if (!text) return params;
            
            // 按行分割
            const lines = text.split('\n');
            
            lines.forEach(line => {
                // 忽略注释和空行
                line = line.trim();
                if (line === '' || line.startsWith('#') || line.startsWith(';')) return;
                
                // 分割参数名和值
                const equalsIndex = line.indexOf('=');
                if (equalsIndex === -1) return;
                
                const name = line.substring(0, equalsIndex).trim();
                const value = line.substring(equalsIndex + 1).trim();
                
                if (name) {
                    params[name] = value;
                }
            });
            
            return params;
        }

        // 对比参数
        function compareParameters(baselineParams, nonBaselineParams) {
            const diff = [];           // 值不同的参数
            const onlyBaseline = [];   // 仅在基线中存在的参数
            const onlyNonBaseline = [];// 仅在非基线中存在的参数
            
            // 检查基线中的参数
            Object.keys(baselineParams).forEach(name => {
                if (nonBaselineParams.hasOwnProperty(name)) {
                    // 参数在两个配置中都存在
                    if (baselineParams[name] !== nonBaselineParams[name]) {
                        diff.push({
                            name,
                            baselineValue: baselineParams[name],
                            nonBaselineValue: nonBaselineParams[name]
                        });
                    }
                } else {
                    // 参数仅在基线中存在
                    onlyBaseline.push({
                        name,
                        value: baselineParams[name]
                    });
                }
            });
            
            // 检查仅在非基线中存在的参数
            Object.keys(nonBaselineParams).forEach(name => {
                if (!baselineParams.hasOwnProperty(name)) {
                    onlyNonBaseline.push({
                        name,
                        value: nonBaselineParams[name]
                    });
                }
            });
            
            return { diff, onlyBaseline, onlyNonBaseline };
        }

        // 显示对比结果
        function displayResults(results) {
            const { diff, onlyBaseline, onlyNonBaseline } = results;
            
            // 更新计数
            document.getElementById('diffCount').textContent = diff.length;
            document.getElementById('onlyBaselineCount').textContent = onlyBaseline.length;
            document.getElementById('onlyNonBaselineCount').textContent = onlyNonBaseline.length;
            
            // 清空表格
            document.getElementById('diffTableBody').innerHTML = '';
            document.getElementById('onlyBaselineTableBody').innerHTML = '';
            document.getElementById('onlyNonBaselineTableBody').innerHTML = '';
            
            // 显示值不同的参数
            if (diff.length === 0) {
                document.getElementById('diffEmpty').classList.remove('hidden');
            } else {
                document.getElementById('diffEmpty').classList.add('hidden');
                
                diff.forEach(param => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-all-300';
                    row.innerHTML = `
                        <td class="py-3 px-4 border-b font-medium">${param.name}</td>
                        <td class="py-3 px-4 border-b bg-warning/10">${param.baselineValue}</td>
                        <td class="py-3 px-4 border-b bg-warning/10">${param.nonBaselineValue}</td>
                    `;
                    document.getElementById('diffTableBody').appendChild(row);
                });
            }
            
            // 显示仅在基线中存在的参数
            if (onlyBaseline.length === 0) {
                document.getElementById('onlyBaselineEmpty').classList.remove('hidden');
            } else {
                document.getElementById('onlyBaselineEmpty').classList.add('hidden');
                
                onlyBaseline.forEach(param => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-all-300';
                    row.innerHTML = `
                        <td class="py-3 px-4 border-b font-medium">${param.name}</td>
                        <td class="py-3 px-4 border-b bg-success/10">${param.value}</td>
                    `;
                    document.getElementById('onlyBaselineTableBody').appendChild(row);
                });
            }
            
            // 显示仅在非基线中存在的参数
            if (onlyNonBaseline.length === 0) {
                document.getElementById('onlyNonBaselineEmpty').classList.remove('hidden');
            } else {
                document.getElementById('onlyNonBaselineEmpty').classList.add('hidden');
                
                onlyNonBaseline.forEach(param => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-all-300';
                    row.innerHTML = `
                        <td class="py-3 px-4 border-b font-medium">${param.name}</td>
                        <td class="py-3 px-4 border-b bg-danger/10">${param.value}</td>
                    `;
                    document.getElementById('onlyNonBaselineTableBody').appendChild(row);
                });
            }
            
            // 显示结果区域
            document.getElementById('results').classList.remove('hidden');
            
            // 滚动到结果区域
            document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
        }

        // 对比按钮点击事件
        document.getElementById('compareBtn').addEventListener('click', function() {
            // 获取输入的参数文本
            const baselineText = document.getElementById('baselineText').value.trim();
            const nonBaselineText = document.getElementById('nonBaselineText').value.trim();
            
            // 验证输入
            if (!baselineText) {
                showToast('请输入或上传基线参数', 'error');
                return;
            }
            
            if (!nonBaselineText) {
                showToast('请输入或上传非基线参数', 'error');
                return;
            }
            
            // 解析参数
            const baselineParams = parseParameters(baselineText);
            const nonBaselineParams = parseParameters(nonBaselineText);
            
            // 验证解析结果
            if (Object.keys(baselineParams).length === 0) {
                showToast('无法解析基线参数，请检查格式', 'error');
                return;
            }
            
            if (Object.keys(nonBaselineParams).length === 0) {
                showToast('无法解析非基线参数，请检查格式', 'error');
                return;
            }
            
            // 对比参数
            const results = compareParameters(baselineParams, nonBaselineParams);
            
            // 显示结果
            displayResults(results);
            
            // 显示成功提示
            showToast('参数对比完成', 'success');
        });

        // 示例数据填充
        document.addEventListener('DOMContentLoaded', function() {
            // 为了演示，填充一些示例数据
            const mysql57Baseline = `# MySQL 5.7 基线配置
max_connections = 100
innodb_buffer_pool_size = 1G
innodb_log_file_size = 50M
query_cache_type = ON
query_cache_size = 64M
join_buffer_size = 128K
sort_buffer_size = 256K
`;

            const mysql57NonBaseline = `# MySQL 5.7 非基线配置
max_connections = 200
innodb_buffer_pool_size = 2G
innodb_log_file_size = 50M
query_cache_type = OFF
# query_cache_size = 64M
join_buffer_size = 256K
sort_buffer_size = 256K
table_open_cache = 2000
`;

            document.getElementById('baselineText').value = mysql57Baseline;
            document.getElementById('nonBaselineText').value = mysql57NonBaseline;
        });
    </script>
</body>
</html>
